<script setup>

import { queryUserPage } from '@/api/user'
import { ref,onMounted } from 'vue';

const queryForm = ref({ 
    page: '1',
    pageSize: '5',
    total:0,
    pages:1,
    t: {
        name: '',
        gender: '' 
    }
})
const userList = ref([])


const queryUsers = async() => {
    let result = await queryUserPage(queryForm.value)
    userList.value = result.data

    queryForm.value.pages = result.pages
    queryForm.value.total = result.total
}

// 分页处理
// 参数 val：表示用户切换到的 “当前页码”（例如 2、3 等）。
// 分页每页大小发生改变
const handleSizeChange = (val) => {
    // 从第一页开始
    queryForm.value.pageSize = val
    //  (前往第几页的框)每页显示val条数据
    queryForm.value.page = 1
    //   搜索
  queryUsers()


}
// (用户直接点击第几页)当前页发生变化
const handleCurrentChange = (val) => {
    queryForm.value.page = val
    queryUsers()
}







onMounted(() => {
    queryUsers()
})
</script>

<template>
    员工管理

    <br>
     <el-form :inline="true" :model="queryForm" class="demo-form-inline">
    <el-form-item label="用户名字">
      <el-input v-model="queryForm.t.name" placeholder="请输入名字" clearable />
    </el-form-item>
    <el-form-item label="性别">
      <el-select
        v-model="queryForm.t. gender"
        placeholder="请选择性别"
        clearable
      >
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
      </el-select>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="queryUsers">查询</el-button>
    </el-form-item>
  </el-form>
<!-- 表格 -->
   <el-table :data="userList" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="gender" label="gender" >
    <template #default="scope">
        {{ scope.row.gender === 1 ? '男' : '女' }}
    </template>
    </el-table-column>
    <el-table-column prop="createTime" label="CreateTime" width="180" />
  </el-table>

  <!-- 分页展示 -->
    <el-pagination
      v-model:current-page="queryForm.page"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[5,10,15,20]"
      
      layout="total, sizes, prev, pager,next, jumper"
      :total="queryForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<style scoped> </style>